<template>
  <tr>
    <td><input type="checkbox"  v-model="checked"/></td>
    <td>{{theName}}</td>
    <td>{{thePrice}}</td>
    <td>
      <button @click="less">-</button>
      {{theNum}}
      <button @click="add">+</button>
    </td>
    <td>{{thePrice * theNum}}</td>
    <td>
      <button @click="del">删除</button>
    </td>
  </tr>
</template>

<script>
export default {
  data () {
    return {

    }
  },

  watch: {
    checked (newVal) {
      // console.log(newVal)
      this.$emit('check-change', [newVal, this.i])
    }
  },

  computed: {

  },

  props: ['theName', 'thePrice', 'theNum', 'i', 'checked'],

  methods: {
    add () {
      // console.log(this.i)
      this.$emit('on-add', this.i)
    },
    less () {
      this.$emit('on-less', this.i)
    },
    del () {
      this.$emit('on-del', this.i)
    }
  }
}
</script>

<style scoped lang='less'>

</style>
